<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>

	 <!-- 给当前页面域添加一段java代码，用来自动获取当前项目名，不写死,然后再通过EL表达式获取 -->
    <%
    	pageContext.setAttribute("PATH",request.getContextPath());
    
     %>

	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	
	
	<link rel="stylesheet" href="${PATH}/css/bootstrap.css">
	
	
	<link rel="stylesheet" href="${PATH }/css/reset.css">
	<link rel="stylesheet" href="${PATH }/css/webstyle.css">
	<script src="${PATH }/js/jquery-v1.10.2.min.js" type="text/javascript"></script>

	<title>淮安结婚网</title>
</head>
<body style="background-color: #fdfbfe">

	<div class="index-cover"></div>
	<!-- 公共头部 -->
	<div class="common-header">
		<div class="header-content layout">
			<img src="${PATH }/img/logo/logo.png">
		</div>
		<div class="nav clearfix">
			<ul class="layout">
				<li class="active"><a href="javascript:void(0)">首页</a></li>
				<li><a href="javascript:void(0)">优选婚庆</a></li>
				<li><a href="javascript:void(0)">优选酒店</a></li>
				<li><a href="javascript:void(0)">优选主持</a></li>
				<li><a href="javascript:void(0)">优选化妆礼服</a></li>
				<li><a href="javascript:void(0)">优选摄像</a></li>
				<li><a href="javascript:void(0)">优选摄影</a></li>
				<li><a href="javascript:void(0)">优选服务商</a></li>
			</ul>
		</div>
	</div>
	
	<div class="login-background layout"></div>

	<div class="login-mod-tab clearfix">
		<ul class="login-tabs clearfix">
			<li class="active">登录</li>
			<li>注册</li>
		</ul>
		
		<div class="panel active">
			<form action="${PATH}/successUser.go" method="post">
				<div class="login-tel login-ipt">
					<input type="text" placeholder="请输入您的已注册成功的手机号码" name="phone" required="required"  pattern="^1[345678][0-9]{9}$">
				</div>
				<div class="login-dl login-ipt">
					<input type="submit" value="登录">
				</div>
				
			</form>
		</div>

		<div class="panel">
			<form action="${PATH}/toUserRegister.go" method="post">
				<div class="login-tel login-ipt">
					<input type="text" name="phone" id="phoneNum" placeholder="请输入您的手机号码" required="required" pattern="^1[345678][0-9]{9}$"/>
				</div>
				<div class="login-yzm login-ipt">
					<input type="text" name="validateCode" placeholder="请输入验证码" required="required"/>
				</div>
				<div class="get-yzm login-ipt">
					<input class="yzm-ipt send" type="button" value="获取验证码">
				</div>
				

				<div class="login-dl login-ipt">
					<input type="submit" value="注册">
				</div>
				
			</form>
		</div>
			
	</div>


	<!-- footer样式 -->
	<div class="common-footer">
		<p>
			<a href="http://www.miibeian.gov.cn/">备案号：苏ICP备1111111</a>
		</p>
		<p>
			<a href="#">Copyright &copy; 2018.淮安结婚网 All rights reserved.</a>
		</p>
	</div>

	<script>
		$('.login-tabs>li').on('click', function(){
            var $this = $(this)
            var index = $this.index()
            $this.addClass('active').siblings().removeClass('active')
            $('.panel').eq(index).addClass('active').siblings().removeClass('active')
        });
        
        // 验证手机号方法，留给获取验证码用
		function isPhoneNo(phone) { 
		 var pattern = /^1[345678][0-9]{9}$/; 
		 //test()方法 判断字符串中是否匹配到正则表达式内容，返回的是boolean值 ( true / false )
		 return pattern.test(phone); 
		}
		
        //发送手机号码，获取验证码
        $('.send').click(function(){
        	 
        	
        	//获取input的手机号码,trim方法去除文本前后空格，
        	//replace(参数)方法去除文本值内容的空格
        	var phoneNum = $.trim($('#phoneNum').val().replace(/[ ]/g,""));
        	
        	//1、先判断不为空
        	if ($.trim($('#phoneNum').val()).length == 0) { 
			 	alert("请先输入手机号！！！");
			 	//2、再判断验证手机号码的方法是否正确
			 } else if(isPhoneNo(phoneNum) == false) {
			 	alert("请确认手机号码是否正确！");
			 }else{
			 	var formData = new FormData();
			 	formData.append("phone",phoneNum);
			 	//3、如正确准备发送ajax请求
			 	$(this).attr('value','正在获取中.....').removeClass('send');
	        	$(this).attr('disabled','disabled');
	        	$.ajax({
		       		 url: "${PATH}/requestCode.go",
		             type: "post",
		             data: formData,
		             processData: false,  // 告诉jQuery不要去处理发送的数据
	             	 contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
	        		 success: function(map){
		               alert(map.msg);
		             },
		             error:function(){
		             	alert("请求失败！");
		             }	
	        	});
			 }
        });
	</script>

</body>
</html>